<script setup>
</script>

<template>
	<view class="scroll-notice">
		<!-- 左 中 右 -->
		<view class="left-wrap">
			<image class="icon" src="/static/notic_prefix.png" mode="aspectFill"></image>
		</view>
		<view class="notice-wrap">
			<!-- 上下滑动 -->
			<swiper class="swiper" vertical autoplay interval="3000" circular>
				<swiper-item class="swiper-item">测试文本内容11111测试文本内容11111测试文本内容11111</swiper-item>
				<swiper-item class="swiper-item">测试文本内容22222</swiper-item>
				<swiper-item class="swiper-item">测试文本内容33333</swiper-item>
				<swiper-item class="swiper-item">测试文本内容44444</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<style lang="scss" scoped>
.scroll-notice{
	
	// flex布局 左中右
	display: flex;align-items: center;justify-content: space-between;gap: 20rpx;
	.left-wrap{flex-shrink: 0;.icon{width: 88rpx;height:40rpx;display: block;}}
	.notice-wrap{
		flex:1;height: 40rpx;
		.swiper{height: 40rpx;

			
		&-item{
			height: 100%;line-height: 40rpx;
			font-size: 32rpx;color: #333;
			width: 100%;
			// 超出一行 显示省略号
			white-space: nowrap; /* 强制文本不换行 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 超出部分显示省略号 */
		}
	}
	}
	// 右对齐 flex-shrink: 0
	.right-wrap{flex-shrink: 0;width:80rpx;display: flex;align-items: center;justify-content:flex-end;}
}
</style>